<template>
	<view class="Jbrand_wp" v-if="Jinfo.length>0">
	<!-- 爆品专区图片 -->
<!-- 		<view class="Jbrand_title">
			 <image v-if="Jpic" :src="Jpic" mode="widthFix"></image>
		</view> -->
<!-- 		<view class="Jbrand_title">
			 <image src="../../static/baopin.png" mode="widthFix"></image>
		</view> -->
		<view class="Jbrand_lists">
			<view class="list_item" v-for="(item,idx) in Jinfo" :key="idx" @click="$navTo(item.url)">
				<!-- <image style="position: absolute ;top: 0upx;width: 33vw;margin:0upx 20upx 0 0;" src="../../static/baopin.png" mode="widthFix"></image> -->
				<image :src="item.img" mode=""></image>
				<text class="list_title">{{item.title}}</text>
				<view class="list_money">
					<text>￥{{item.productprice}}</text>
					<text>已售 {{item.sales}}</text>
				</view>
				<!-- <text class="list_shopname">{{item.supname}}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Jpic: {
				default:''
			},
			
			Jinfo: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="scss">
	.Jbrand_wp {
		padding: 0upx 20upx;
		position: relative;
	}
	.Jbrand_title image {
		width: 100%;
	}

	/* 商品列表 */
	.Jbrand_lists{
		white-space: nowrap;
		overflow-x: scroll;
		padding: 10upx 20upx 0 15upx ;

	}
	.list_item {
		background-color: #FFFFFF;
		border-radius: 10upx;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
		display: inline-block;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		// margin-bottom: 10upx;
		width: 33vw;
		margin-right: 20upx;
	}


	.list_item image {
		height: 33vw;
		width: 100%;
	}

	.list_title {
		display: block;
		font-weight: bold;
		overflow: hidden;
		padding: 8upx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list_price {
		color: $base-color;
		font-weight: bold;
		padding: 0 8upx;
	}

	.list_price1::after {
		content: '元';
		font-size: $font-sm;
	}

	.list_price2::before {
		content: '+';
		font-size: $font-sm;
	}

	.list_price2::after {
		content: '米券';
		font-size: $font-sm;
	}

	.list_price3::after {
		content: '米券';
		font-size: $font-sm;
	}

	.list_money {
		color: $font-color-light;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-base;
		padding: 0 8upx;
	}

	.list_shopname {
		color: #191970;
		font-size: 26upx;
		padding: 0 8upx;
	}
</style>
